<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/common/layout.jsp">
<bsl:layout-component name="html-head">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.fileupload-ui.css" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/validation-horiz.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqtransform.css" type="text/css" media="all" />
	
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/lang/zh_CN.js"></script>
	
	<script src="<%=request.getContextPath()%>/js/jquery.ui.widget.js"></script>
	<script src="<%=request.getContextPath()%>/js/tmpl.js"></script>
	<script src="<%=request.getContextPath()%>/js/load-image.js"></script>
	<script src="<%=request.getContextPath()%>/js/canvas-to-blob.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-image-gallery.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload.js"></script>
	<!-- The File Upload file processing plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-fp.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-ui.js"></script>
	<script src="<%=request.getContextPath()%>/js/locale.js"></script>
	<script src="<%=request.getContextPath()%>/js/upload.main.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
	<script src="<%=request.getContextPath()%>/js/validation.js"
		type="text/javascript"></script>
	<script>
			
			var editor;
			KindEditor.ready(function(K) {
				$("form.form-horizontal").jqTransform();
				editor = K.create('textarea[name="article.articleContent.content"]', {
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : true,
					filePostName:'kindImgFile',
					uploadJson:'harry/fileUpload',
					afterChange : function() {
				     
				      var limitNum = 10000;  //设定限制字数
				      var pattern = '还可以输入' + limitNum + '字';
				      $('.word_surplus').html(pattern); //输入显示
				      if(this.count('text') > limitNum) {
				       pattern = ('字数超过限制，请适当删除部分内容');
				       //超过字数限制自动截取
				       var strValue = editor.text();
				       strValue = strValue.substring(0,limitNum);
				       editor.text(strValue);      
				       } else {
				       //计算剩余字数
				       var result = limitNum - this.count('text');
				       pattern = '还可以输入' +  result + '字';
				       }
				       $('.word_surplus').html(pattern); //输入显示
				      ////////
				     } ,
					items : [
							'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
							'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
							'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
							'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', 
							'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
							'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
							'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
							'anchor', 'link', 'unlink', '|', 'about'
						]
				});
			});
			function changeAction(form)
			{
				$("#loading").show();
				form.action = contextPath +"/saveArticle";
				editor.sync("article.articleContent.content");
				var title = $('#title').val();
				$.ajax({ 
			          type: "POST", 
			          url: contextPath + "/ajaxCheckTitle", 
			          data:"articleTitle="+title,
			          success: function(msg){ 
			 			var obj = $.parseJSON(msg);
			 			if(obj.success == 1) {
			 				form.submit();
					 	} else {
					 		if(obj.success == 0) {
				 				$('#title').addClass("LV_invalid_field");
				 				$('#title').next().removeClass("LV_valid");
				 				$('#title').next().addClass("LV_invalid");
				 				$('#title').next().text("已存在相同标题");
					 		}
						 }
			         } 
			     }); 
			}

			function deleteArticle(form) {
				form.action = contextPath +"/deleteArticle";
				editor.sync("article.articleContent.content");
				form.submit();
			}

			function cancelAction(form) {
				form.action = contextPath +"/cancelEditArticle";
				form.submit();
			}

			function switchDescArea(isOn, fileId, photoIndex, descText){
				if(descText == null) {
					descText="";
				}
				var desc = $("#desc" + fileId);
				var a = $("#sign-text" + fileId);
				var area = $("#desc-area" + fileId);
				var strArea = "desc-area" + fileId;
				if(isOn == 1)
				{
					a.css("display", "none");
					if(area.length == 0) {
					
						desc.append("<div id='"+strArea+"'><textarea id='desc-content"+fileId+"' name='photos["+photoIndex+"].description'>"+descText+"</textarea><button type='button' class='btn' onclick='switchDescArea(0, "+fileId+",0,\""+descText+"\")'>取消</button></div>");
					} else {
						area.css("display", "inline")
					}
					$("#desc-content" + fileId).focus();
					
					
				} else {
					
					$("#desc-content" + fileId).text(descText);
					a.css("display", "inline");
					area.css("display", "none");
				}
				
			}

			var titleVerify;
			 $(function(){
				 
				   titleVerify = new LiveValidation('title' , {onlyOnBlur: true});
				   titleVerify.add(Validate.Presence, { failureMessage: "请写一个标题"} );
				   titleVerify.add( Validate.Length, { minimum: 1,maximum:50, tooShortMessage:"标题不少于1字", tooLongMessage:"标题不超过50字" } );
			});
		</script>
</bsl:layout-component>
<bsl:layout-component name="title">
编辑
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
	<div style="float: none;margin-left: 20px; margin-top: 50px">
		<form id="fileupload" class="form-horizontal" action="${contextPath}/fileUpload" method="POST">
				<div class="control-group">
					<label class="control-label">标题:</label>
					<input name="division.id" value="${curDivision.id}" type="hidden">
					<c:choose>
						<c:when test="${not empty article.title}">
							<div style="float:left;padding-top:5px;text-align:left;color:#777777;" >
								${article.title}
							</div>
						</c:when>
						<c:otherwise>
							<div class="control" >
								<input  id="title" name="article.title" value="${article.title}" type="text">
							</div>
						</c:otherwise>
					</c:choose>
					
				</div>
				<div class="control-group">
					<label class="control-label">语言:</label>
					<div class="control" >
							<select name="article.articleContent.local" id="select" style="z-index:-1">
								<c:forEach  begin="0" end="1" var="item">
									<c:choose>
										<c:when test="${item == 1}">
											<c:set value="English" var="local"></c:set>
										</c:when>
										<c:when test="${item == 0}">
											<c:set value="中文" var="local"></c:set>
										</c:when>
									</c:choose>
									<c:choose>
										<c:when test="${item == article.local}">
											<option selected="selected" value="${item}">${local}</option>
										</c:when>
										<c:otherwise>
											<option value="${item}">${local}</option>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</select>
					</div>
				</div>
				
				
				
				<div class="control-group">
					<label class="control-label">类别:</label>
					<div class="control" >
							<select name="category.id" id="select" style="z-index:-1">
								<c:forEach items="${cateList}" var="item">
									<c:choose>
										<c:when test="${item.id == article.categoryId}">
											<option selected="selected" value="${item.id}">${item.cateName}</option>
										</c:when>
										<c:otherwise>
											<option value="${item.id}">${item.cateName}</option>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</select>
					</div>
				</div>

				
				<c:set var="isAdmin" value="no"></c:set>
				<c:choose>
					<c:when test="${user.role.name eq 'admin'}">
						<c:set var="isAdmin" value="yes"></c:set>
					</c:when>
				</c:choose>
				<c:if test="${isAdmin eq 'yes'}">
					<div class="control-group">
						<label class="control-label">属性:</label>
						<div class="control" >
							<select name="property.id" style="z-index:-1">
									<c:forEach items="${propList}" var="item">
										<c:choose>
											<c:when test="${item.id == article.articleProperty.id}">
												<option selected="selected" value="${item.id}">${item.propertyName}</option>
											</c:when>
											<c:otherwise>
												<option value="${item.id}">${item.propertyName}</option>
											</c:otherwise>
										</c:choose>
										
									</c:forEach>
							</select>
						</div>
					</div>
				</c:if>
				
				
			
					<div class="control-group">
					<label class="control-label">图片:</label>
					<div class="control" >
						<span class="btn btn-info fileinput-button">
							<i class="icon-plus icon-white"></i>
		                    <span>加图片...</span>
		                    <input type="file" name="file" multiple>
		                </span>
					</div>
					<!-- The loading indicator is shown during file processing -->
			        <div class="fileupload-loading"></div>
				        <!-- The table listing the files available for upload/download -->
				        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery">
				        	<c:forEach var="photo" varStatus="vs" items="${article.album.photos}">
				        		
				        			<tr class="template-download">
							       
							            <td class="preview" style="width:100px">
							                <a href="${contextPath}${photo.original}" target="_blank" title="${photo.photoName}" rel="gallery" download="${photo.photoName}"><img src="${contextPath}${photo.thumbnailSmall}"></a>
							            </td>
							            <td id="desc${photo.id}" style="width:40%">
							            	<c:choose>
							            		<c:when test="${not empty photo.description}">
							            			<c:set value="${photo.description}" var="desc"></c:set>
							            		</c:when>
							            		<c:otherwise>
							            			<c:set value="添加描述" var="desc"></c:set>
							            		</c:otherwise>
							            	</c:choose>
							            	<a id="sign-text${photo.id}" class="sign-text" onclick="switchDescArea(1,'${photo.id}','${vs.count-1}', '${photo.description}')">${desc}</a>
											<input class="photo-input" type="hidden" name="photos[${vs.count - 1}].id" value="${photo.id}">
							            </td>
							            <c:choose>
							           
							            	<c:when test="${photo.id == article.album.coverPhotoId}">
							            		<c:set var="check" value="checked"></c:set>
							            	</c:when>
							            	<c:otherwise>
							            		<c:set var="check" value=""></c:set>
							            	</c:otherwise>
							            </c:choose>
							           	 <td style="text-align:right"><input type="radio" name="coverIndex"  ${check}  value="${vs.count-1}"/>设置为封面</td>
										<td>&nbsp;</td>
							        <td class="delete">
							            <button class="btn btn-danger" data-type="get" data-url="${contextPath}/fileDelete?photoId=${photo.id}">
							                <i class="icon-trash icon-white"></i>
							                <span>删除</span>
							            </button>
							        </td>
							    </tr>
				        	</c:forEach>
								</tbody>
				        </table>
					</div>
					<div class="control-group">
					<label class="control-label">内容:</label>	
					<div class="control" >
						<c:if test="${article != null}">
							<input type="hidden" name="article.id" value="${article.id}">
						</c:if>
						<div class="word_surplus sign-text"></div>
							<textarea name="article.articleContent.content" style="width:630px;height:500px;visibility:hidden;" >${article.articleContent.content}</textarea>
					</div>
				  </div>
				  <c:if test="${not empty article}">
					  	<div class="control-group">
						<label class="control-label">修改原因:</label>	
						<div class="control" >
							<textarea name="article.articleContent.reason" style="width:625px;height:50px;"></textarea>
						</div>
					  </div>
				  </c:if>
				  <div style="width: 100%; text-align: center">
				  	<c:set var="isAdmin" value="no"></c:set>
					<c:choose>
						<c:when test="${user.role.name eq 'admin'}">
							<c:set var="isAdmin" value="yes"></c:set>
						</c:when>
					</c:choose>
						<c:if test="${isAdmin eq 'yes'}">
							<button type="button" class="btn btn-danger" class="icon-white" onclick="deleteArticle(this.form)">删除</button>
						</c:if>
				  	<button type="button" class="btn btn-info" onclick="cancelAction(this.form)">取消</button>
				  	<button type="button" class="btn btn-info" onclick="changeAction(this.form)">保存</button>
				  	<span id="loading" style="display: none"><img alt="" src="${contextPath }/images/loadingIndicator.gif"></span>
				  </div>
				  
				  
		</form>
		
	</div>		
  	<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=formatName(file.name)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview" style="width:100px">{% if (file.thumbnail_url) { %}
                <a href="{%=contextPath + file.url%}" target="_blank" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=contextPath + file.thumbnail_url%}"></a>
            {% } %}</td>
            <td id="desc{%=file.id%}" style="width:40%">
				{% var k = $('.photo-input').length;%} {%if(k==0) { var h='0'} else{var h = k};%}
				<a id="sign-text{%=file.id%}" class="sign-text" onclick="switchDescArea(1,{%=file.id%},{%=h%})">添加描述</a>
				<input class="photo-input" type="hidden" name="photos[{%=h%}].id" value="{%=file.id%}">
            </td>
			{%var isCheck = ((h=='0')? 'checked' : '' );%}
           	 <td style="text-align:right"><input type="radio" name="coverIndex" {%=isCheck%} value="{%=h%}"/>设置为封面</td>

			<td>&nbsp;</td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=contextPath + file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>
        </td>
    </tr>
{% } %}
</script>	       
</bsl:layout-component>
</bsl:layout-render>